<template>
  <Dialog
    v-model="dialogVisible"
    :appendToBody="true"
    :top="'5vh'"
    :title="dialogTitle"
    width="70%"
  >
    <ContentWrap>
      <el-table :data="list">
        <el-table-column label="商品信息" min-width="320">
          <template #default="{ row }">
            <div class="flex flex-items-center">
              <el-image
                fit="cover"
                :src="row.picUrl || spuItem.picUrl"
                class="flex-none w-50px h-50px rounded-4px"
              />
              <div class="ml-4 overflow-hidden">
                <el-tooltip effect="dark" :content="spuItem.spuName" placement="top">
                  <div>
                    {{ spuItem.spuName }}
                  </div>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品规格" min-width="168">
          <template #default="{ row }">
            {{ spuItem.specType ? skuSpecFormat(row.properties) : '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零售价(元)" min-width="168">
          <template #header>
            <div class="flex flex-items-center flex-justify-center">
              零售价
              <el-popover placement="top" trigger="hover" content="商品销售价格">
                <template #reference>
                  <Icon :icon="'ep:question-filled'" />
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="{ row }"> {{ row.oldPrice }} 元 </template>
        </el-table-column>

        <el-table-column align="center" label="最低价(元)" min-width="168">
          <template #header>
            <div class="flex flex-items-center flex-justify-center">
              最低价
              <el-popover
                placement="top"
                trigger="hover"
                content="商品控价价格，低于该价格商品禁止销售"
              >
                <template #reference>
                  <Icon :icon="'ep:question-filled'" />
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="{ row }"> {{ row.oldLowPrice }} 元 </template>
        </el-table-column>
        <el-table-column align="center" label="零售价(元)" min-width="168">
          <template #header>
            <div class="flex flex-items-center flex-justify-center"> 调整后零售价 </div>
          </template>
          <template #default="{ row }">
            <el-input-number
              v-model="row.price"
              :min="0"
              :precision="2"
              :step="0.1"
              class="w-100%!"
              :controls="false"
            >
              <template #suffix>
                <span>元</span>
              </template>
            </el-input-number>
          </template>
        </el-table-column>

        <el-table-column align="center" label="最低价(元)" min-width="168">
          <template #header>
            <div class="flex flex-items-center flex-justify-center"> 调整后最低价 </div>
          </template>
          <template #default="{ row }">
            <el-input-number
              v-model="row.lowPrice"
              :min="0"
              :precision="2"
              :step="0.1"
              class="w-100%!"
              :controls="false"
            >
              <template #suffix>
                <span>元</span>
              </template>
            </el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
    <template #footer>
      <el-button type="primary" @click="confirm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { ElTable } from 'element-plus'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { useProductUtils } from '@/views/mall/product/hooks/useProduct'
import { convertToInteger, formatToFraction } from '@/utils'
import { deepClone } from '@/utils/common'
const { skuSpecFormat } = useProductUtils()
defineOptions({ name: 'UpdatePriceTenantDialog' })
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const spuItem = ref() //spu详情
const list = ref<any[]>([]) // 列表的数据

/** 打开弹窗 */
const open = async (spuId: number) => {
  formLoading.value = true
  if (!spuId) {
    return
  }
  try {
    spuItem.value = await ProductSpuApi.getSpu(spuId)
    list.value = spuItem.value.skus
    list.value.forEach((item) => {
      // 回显价格分转元
      item.price = formatToFraction(item.price)
      item.lowPrice = formatToFraction(item.lowPrice)
      item.oldPrice = deepClone(item.price)
      item.oldLowPrice = deepClone(item.lowPrice)
    })
    dialogTitle.value = '调整价格'
    dialogVisible.value = true
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const emits = defineEmits(['success'])
const message = useMessage() // 消息弹窗

const confirm = async () => {
  let items = list.value.map((sku) => {
    return {
      skuId: sku.skuId,
      price: convertToInteger(sku.price),
      lowPrice: convertToInteger(sku.lowPrice)
    }
  })
  let params = {
    spuId: spuItem.value.spuId,
    items: items
  }
  await ProductSpuApi.spuUpdatePrice(params)
  message.success('修改成功')

  emits('success')

  // 关闭弹窗
  dialogVisible.value = false
}
</script>
